<template>
  <div class="history">
    <van-nav-bar title="历史记录" fixed left-arrow @click-left="$router.back()" />
    <ul>
      <li v-for="item in historyWatchList" :key="item.id" @click="goDetail(item)">
        <div class="pic">
          <img :src="item.imageid ? `http://pic.angelboy.cn/web/${item.imageid}.jpg` : ''" />
        </div>
        <div class="recipe-info">
          <div class="title">
            <span>{{ item.title }}</span>
          </div>
          <div class="author">
            <span>{{ item.authorname }}</span>
          </div>
          <div class="item">
            <span>来自网上厨房</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      historyWatchList: []
    }
  },
  methods: {
    goDetail(item) {
      this.$router.push({
        path: `/videodetail/${item.id}`,
        query: {
          likeNum: item.likeCount,
          collectionNum: item.collectCount
        }
      })
    }
  },
  created() {
    this.historyWatchList = JSON.parse(localStorage.getItem('historyWatch'))
  }
}
</script>

<style lang="less" scoped>
.history {
  padding-top: 46px;
  box-sizing: border-box;

  /deep/.van-icon {
    font-size: 18px;
    color: #323232;
  }

  ul {
    padding: 10px;
    li {
      padding: 5px 0;
      margin-bottom: 10px;
      display: flex;

      .pic {
        width: 80px;
        height: 80px;

        img {
          height: 100%;
          width: 100%;
          border-radius: 15px;
        }
      }
      .recipe-info {
        flex: 1;
        margin-left: 10px;
        display: flex;
        flex-direction: column;

        .title {
          line-height: 24px;
          color: #747474;
          font-size: 16px;
          margin-bottom: 10px;
        }
        .author,
        .item {
          color: #aaa;
          font-size: 12px;
          line-height: 16px;
          max-width: 265px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
